<template>
	<view class="withdraw">
		<u--form labelPosition="top" labelWidth="120rpx" :model="withdraw" :rules="withdrawRules" ref="withdraw"
			class="form" :labelStyle="{color: '#ffffff', fontSize: '25rpx', paddingBottom: '10rpx'}">
			<u-form-item label="银行卡" prop="withdrawForm.bankName" @click="showBankList = true">
				<u--input class="input" v-model="withdraw.withdrawForm.bankName" color="#ffffff"  disabled suffixIcon="arrow-down" :suffixIconStyle="{color: '#ffffff'}"></u--input>
			</u-form-item>
			<u-form-item label="提现金额" prop="withdrawForm.amount">
				<u--input class="input" type="number" v-model="withdraw.withdrawForm.amount" color="#ffffff" maxlength="10"></u--input>
			</u-form-item>
			<u-form-item label="交易密码" prop="withdrawForm.savePassword">
				<u--input class="input" type="password" v-model="withdraw.withdrawForm.savePassword" color="#ffffff" maxlength="6">
				</u--input>
			</u-form-item>
			<u-form-item>
				<button class="light-btn btn" @click="submit">提交</button>
			</u-form-item>
		</u--form>
		<u-picker :show="showBankList" @confirm="setIndexs" @cancel="showBankList = false" @close="showBankList = false" closeOnClickOverlay :columns="[withdraw.bankList]" keyName="bankName"></u-picker>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				showBankList: false,
				withdraw: {
					loading:false,
					bankId:'',
					bankList: [],
					withdrawForm: {
						bankName: '',
						amount: '',
						savePassword: ''
					},
				},
				withdrawRules: {
					'withdrawForm.bankName': {
						type: 'string',
						required: true,
						message: '请输入银行卡',
						trigger: ['blur']
					},
					'withdrawForm.amount': {
						type: 'string',
						required: true,
						message: '请输入金额',
						trigger: ['blur']
					},
					'withdrawForm.savePassword': {
						type: 'string',
						required: true,
						message: '请输入交易密码',
						trigger: ['blur']
					},
				},
			};
		},
		onLoad() {
			this._queryBankList();
		},
		methods: {
			...mapActions('user', ['queryBankList','submitWithdraw']),
			_queryBankList() {
				this.queryBankList().then((res) => {
					this.withdraw.bankList = res.data;
				})
			},
			setIndexs(bank){
				this.withdraw.withdrawForm.bankName = bank.value[0].bankName;
				this.withdraw.bankId = bank.value[0].id;
				this.showBankList = false;
			},
			submit() {
				let _ = this; 
				if(this.withdraw.loading) return;
				this.withdraw.loading = true;
				this.$refs.withdraw.validate().then(res => {
					uni.$u.toast('校验通过')
					this.submitWithdraw({
						bankId: this.withdraw.bankId,
						amount: this.withdraw.withdrawForm.amount,
						safePassword: this.withdraw.withdrawForm.savePassword,
					}).then(res=>{
						uni.$u.toast('提现申请已提交');
					}).finally(()=>{
						this.withdraw.loading = false;
						this.$refs.withdraw.resetFields();
					})
				}).catch(errors => {
					uni.$u.toast('校验失败')
				}).finally(()=>{
					
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.withdraw {
		.form {
			padding: 20rpx 20rpx;

			.input {
				background-color: #232639 !important;
				border: 1rpx solid #666666 !important;
				color: #ffffff;
			}

			.intro {
				color: #ffffff;
				font-size: 25rpx;
				display: flex;

				.light {
					color: #2979ff;
				}
			}
		}

		.btn {
			margin-top: 20rpx;
			width: 100%;
		}

		.inactive {
			background: #999999 !important;
		}
	}
</style>
